<html lang="en" xmlns:th="http://www.thymeleaf.org">


<div th:fragment="commonlink">
    <link rel="icon" href="/images/icons/logo.png" type="image/x-icon"/>
    <script src="/plugins/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>

    <!--bootstrap-->
    <link rel="stylesheet" type="text/css" href="/plugins/bootstrap4/css/bootstrap.min.css"/>
    <script src="/plugins/bootstrap4/js/popper.min.js"></script>
    <script src="/plugins/bootstrap4/js/bootstrap.min.js"></script>

    <!--bootstrap导航-->
    <link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <!--<link rel="stylesheet" type="text/css" href="/plugins/bootstrap-nav/htmleaf-demo.css" />-->
    <link rel="stylesheet" type="text/css" href="/plugins/bootstrap-nav/bootsnav.css"/>
    <script src="/plugins/bootstrap-nav/bootsnav.js"></script>


    <script src="/plugins/vue/vue.js"></script>

    <%--sweetalert--%>
    <script src="https://cdn.bootcss.com/limonte-sweetalert2/7.28.11/sweetalert2.all.min.js"></script>

    <%--
    <link rel="stylesheet" href="/css/catalog/catalog.css"/>
    --%>


    <link rel="stylesheet" type="text/css" href="/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/css/header.css"/>

    <script>
        base = ""
    </script>
</div>

<!--fotter-->
<div th:fragment="header">

    <header class="d-row fixed-top" id="" style="">
        <div class="d-flex flex-row" style="height: 100%;" id="nav">
            <div class="d-flex align-items-center ml-5 under" id="main_nav" style="color:#fff;">
                <a href="/" class="">主页</a>
            </div>
            <!--/*/
            <div class="d-flex align-items-center ml-5 under" id="subject_nav">
                <a href="/catalog/index">课程</a>
            </div>
            /*/-->
            <div class="d-flex align-items-center ml-5 under" id="publish_article_nav">
                <a href="/article/publish">发布文章</a>
            </div>
            <div class="d-flex align-items-center ml-5 under" id="article_ms_nav">
                <a href="/articleManage/index">文章管理</a>
            </div>

            <!--<c:if test="${empty sessionScope.teacher}">-->
            <div th:if="${session.teacher==null}" class="d-flex align-items-center ml-auto under"
                 style="margin-right: 100px;">
                <a href="/login">登录</a>
            </div>
            <!--</c:if>-->
            <!--<c:if test="${!(empty sessionScope.teacher)}">-->
            <div th:if="${session.teacher!=null}" class="d-flex align-items-center ml-auto pr-5" id="te_info"
                 style="display: none;">
                <div class="dropdown">
                    <div class="dropdown-toggle" data-toggle="dropdown">
                        <span th:text="${session.teacher.te_login_name}"></span>
                    </div>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="/teacher/info">
                            <span class="icon" style="font-size: 22px;">&#xe601;</span>
                            <span style="position: relative;top: -6px;font-size: 12px">&nbsp;&nbsp;个人中心</span>
                        </a>
                        <a class="dropdown-item" href="/conversation/index">
                            <span class="icon" style="font-size: 26px;">&#xe624;</span>
                            <span class="message" id="message">0</span>
                            <span style="position: relative;top: -6px;font-size: 12px">私信</span>
                        </a>
                        <!--<a class="dropdown-item" href="#" style="font-size: 12px">-->
                        <!--<span class="icon" style="font-size: 22px;">&#xe635;</span>-->
                        <span style="position: relative;top: -6px;font-size: 12px">&nbsp;&nbsp;设置</span>
                        <!--</a>-->
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="/logout" style="font-size: 15px">退出</a>
                    </div>
                </div>
            </div>
            <!--</c:if>-->


        </div>
    </header>
    <div class="d-row" id="logo">
        <div class="mt-4 col-md-12 p-0">
            <!--<%&#45;&#45;<p style="">情感回馈创作与学习系统</p>&#45;&#45;%>-->
            <img src="/images/a.jpg" width="100%"/>
        </div>
    </div>

    <script src="/js/header.js"></script>
</div>


<!--footer-->
<div th:fragment="footer">
    <footer style="font-size: 12px;
    line-height: 1.625; background-color: #36363d; color:#aaa;">
        <div>
        </div>
        <hr color="#aaa">
        <div class="d-flex justify-content-center align-items-center pb-3">
            版权所有 淮微信息技术中心 &copy; 2018-2019
        </div>
    </footer>
</div>


<!--navLink-->
<div th:fragment="navlink">
    <div class="" style="flex:3">
        <div class="input-group mt-3 p-3 bg-light">
            <form action="/search" method="get" class="form-inline">
                <input type="text" class="form-control" name="key" placeholder="文章/用户/大纲">
                <button class="btn btn-success" type="submit">搜索</button>
            </form>
        </div>
        <hr style="width:50%; height: 2px;" size="10px" color="#00a3cf"/>
        <div class="bg-light p-3">
            <h5 style="font-weight: 500">文章推荐</h5>
            <div class="r_link pt-2 pl-3" id="linkNav">
                <ul>
                    <li class="m-1" v-for="url in urls">
                        <a v-bind:href="url.link">{{url.name}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        var LinkNav = new Vue({
            el: '#linkNav',
            data: {
                urls: []
            },
            methods: {
                init: function () {
                    var _this = this;
                    $.ajax({
                        url: base + '/linkNavs',
                        type: 'post',
                        success: function (result) {
                            // result = JSON.parse(result);
                            for (var i = 0; i < result.length; i++) {
                                var url = {}
                                url.name = result[i]['article_title'];
                                url.link = base + '/article/detail?id=' + result[i]['article_id'];
                                _this.urls.push(url);
                            }
                        }
                    })
                }
            }
        });
        LinkNav.init()

    </script>
</div>


<div th:fragment="catalog">

    <style>
        a:hover {
            cursor: pointer;
            text-decoration: none !important;
        }

        /* #Navigation Styles
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
        nav {
            background: #93ad6b;
            font-size: 0;
            position: relative;
        }

        nav > ul > li {
            display: inline-block;
            font-size: 14px;
            padding: 0 15px;
            position: relative;
        }

        nav > ul > li:first-child {
            padding-left: 0;
        }

        nav > ul > li:last-child {
            padding-right: 0;
        }

        nav > ul > li > a {
            color: #fff;
            display: block;
            position: relative;
            padding: 20px 0;
            border-bottom: 3px solid transparent;
        }

        nav > ul > li:hover > a {
            color: #69aae0;
            border-bottom: 3px solid #69aae0;
        }

        /* #Mega Menu Styles
        –––––––––––––––––––––––––––––––––––––––––––––––––– */
        .mega-menu {
            background: #f0f0f0;
            display: none;
            left: 0;
            position: absolute;
            text-align: left;
            width: 100%;
        }

        .mega-menu h3 {
            color: #444;
        }

        .mega-menu ul {
            float: left;
            margin-bottom: 20px;
            margin-right: 40px;
            width: 205px;
        }

        .mega-menu ul:last-child {
            margin-right: 0;
        }

        .mega-menu a {
            border-bottom: 1px solid #ddd;
            color: #4ea3d8;
            display: block;
            padding: 10px 0;
        }

        .mega-menu a:hover {
            color: #2d6a91;
        }

        /* #Droppable Class Styles
        –––––––––––––––––––––––––––––––––––––––––––––––––– */
        .droppable {
            position: static;
        }

        .droppable > a:after {
            content: "\f107";
            font-family: FontAwesome;
            font-size: 12px;
            padding-left: 6px;
            position: relative;
            top: -1px;
        }

        .droppable:hover .mega-menu {
            display: block;
        }

        /* #Browser Clearfix
        –––––––––––––––––––––––––––––––––––––––––––––––––– */
        .cf:before,
        .cf:after {
            content: " "; /* 1 */
            display: table; /* 2 */
        }

        .cf:after {
            clear: both;
        }
    </style>
    <div class="" style="position:relative; z-index: 5">
        <nav>
            <ul class="container ul-reset">
                <li class='droppable'>
                    <a href='#'>小学</a>
                    <div class='mega-menu'>
                        <div class="container cf">
                            <ul class="ul-reset">
                                <h3>数学</h3>
                                <li><a href='/catalog/1/2'>一年级</a></li>
                                <li><a href='/catalog/2/2'>二年级</a></li>
                                <li><a href='/catalog/3/2'>三年级</a></li>
                                <li><a href='/catalog/4/2'>四年级</a></li>
                                <li><a href='/catalog/5/2'>五年级</a></li>
                                <li><a href='/catalog/6/2'>六年级</a></li>
                            </ul><!-- .ul-reset -->
                            <ul class="ul-reset">
                                <h3>语文</h3>
                                <li><a href='/catalog/1/1'>一年级</a></li>
                                <li><a href='/catalog/2/1'>二年级</a></li>
                                <li><a href='/catalog/3/1'>三年级</a></li>
                                <li><a href='/catalog/4/1'>四年级</a></li>
                                <li><a href='/catalog/5/1'>五年级</a></li>
                                <li><a href='/catalog/6/1'>六年级</a></li>
                            </ul><!-- .ul-reset -->
                            <ul class="ul-reset">
                                <h3>英语</h3>
                                <li><a href='/catalog/3/3'>三年级</a></li>
                                <li><a href='/catalog/4/3'>四年级</a></li>
                                <li><a href='/catalog/5/3'>五年级</a></li>
                                <li><a href='/catalog/6/3'>六年级</a></li>
                            </ul><!-- .ul-reset -->
                        </div><!-- .container -->
                    </div><!-- .mega-menu -->
                </li><!-- .droppable -->
                <li class='droppable'>
                    <a href='#'>初中</a>
                    <div class='mega-menu'>
                        <div class="container cf">
                            <ul class="ul-reset">
                                <h3>数学</h3>
                                <li><a href='/catalog/7/2'>一年级</a></li>
                                <li><a href='/catalog/8/2'>二年级</a></li>
                                <li><a href='/catalog/9/2'>三年级</a></li>
                            </ul><!-- .ul-reset -->
                            <ul class="ul-reset">
                                <h3>语文</h3>
                                <li><a href='/catalog/7/1'>一年级</a></li>
                                <li><a href='/catalog/8/1'>二年级</a></li>
                                <li><a href='/catalog/9/1'>三年级</a></li>
                            </ul><!-- .ul-reset -->
                            <ul class="ul-reset">
                                <h3>英语</h3>
                                <li><a href='/catalog/7/3'>一年级</a></li>
                                <li><a href='/catalog/8/3'>二年级</a></li>
                                <li><a href='/catalog/9/3'>三年级</a></li>
                            </ul><!-- .ul-reset -->
                        </div><!-- .container -->
                    </div><!-- .mega-menu-->
                </li><!-- .droppable -->
                <li class='droppable'>
                    <a href='#'>高中</a>
                    <div class='mega-menu'>
                        <div class="container cf">
                            <ul class="ul-reset">
                                <h3>数学</h3>
                                <li><a href='/catalog/10/2'>一年级</a></li>
                                <li><a href='/catalog/11/2'>二年级</a></li>
                                <li><a href='/catalog/12/2'>三年级</a></li>
                            </ul><!-- .ul-reset -->
                            <ul class="ul-reset">
                                <h3>语文</h3>
                                <li><a href='/catalog/10/1'>一年级</a></li>
                                <li><a href='/catalog/11/1'>二年级</a></li>
                                <li><a href='/catalog/12/1'>三年级</a></li>
                            </ul><!-- .ul-reset -->
                            <ul class="ul-reset">
                                <h3>英语</h3>
                                <li><a href='/catalog/10/3'>一年级</a></li>
                                <li><a href='/catalog/11/3'>二年级</a></li>
                                <li><a href='/catalog/12/3'>三年级</a></li>
                            </ul><!-- .ul-reset -->
                        </div><!-- .container -->
                    </div><!-- .mega-menu-->
                </li>
                <li class='droppable' id="outlinesVue">
                    <a href='#'>知识图谱</a>
                    <div class='mega-menu'>
                        <div class="container cf">
                            <ul class="ul-reset">
                                <h3>数学</h3>
                                <li v-for="">

                                </li>
                                <li><a href='/catalog/outline?oid=1'>矩阵</a></li>
                                <li><a href='/catalog/11/2'>不等式</a></li>
                                <li><a href='/catalog/12/2'>几何证明选讲</a></li>
                                <li><a href='/catalog/12/2'>推理与证明</a></li>
                                <li><a href='/catalog/12/2'>算法初步</a></li>
                                <li><a href='/catalog/12/2'>概率与统计</a></li>
                                <li><a href='/catalog/12/2'>计数原理</a></li>
                            </ul><!-- .ul-reset -->
                            <ul class="ul-reset">
                                <h3>语文</h3>
                                <li><a href='/catalog/10/1'></a></li>
                                <li><a href='/catalog/11/1'>二年级</a></li>
                                <li><a href='/catalog/12/1'>三年级</a></li>
                            </ul><!-- .ul-reset -->
                        </div><!-- .container -->
                    </div><!-- .mega-menu-->
                </li>
            </ul><!-- .container .ul-reset -->
        </nav>
    </div>

    <script>
        var OutlinesVue = new Vue({
            el: "#outlinesVue",
            data: {
                outlines: []
            },
            methods: {
                init: function () {

                }
            }
        })
    </script>
</div>

<div th:fragment="page">
    <div class="column col-md-8">
        <div class="dataTables_info" id="sampleTable_info" role="status" aria-live="polite">
            第${page.pageCount}页 &nbsp;&nbsp;
            总条数:${page.totalCount}
        </div>
    </div>
    <div class="column col-md-4">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" onclick="goto(${page.pageIndex-1})">&lt;&lt;</a></li>
            <li class="page-item"><a class="page-link" href="#">${page.pageIndex}</a></li>
            <li class="page-item"><a class="page-link" onclick="goto(${page.pageIndex+1})">&gt;&gt;</a></li>
        </ul>
    </div>

    <script>
        function goto(pageIndex) {
            var form = $('#search');  // 分页搜索表单
            var $index = $('<input type="hidden" name="pageIndex">')
            $index.attr('value', pageIndex)
            form.append($index)
            form.submit()
        }
    </script>
</div>
</html>
